/*
 * @Description: 车票的详细信息
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:49:50
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 16:38:43
 */
<template>
  <div
    class="info_main fontsize32"
    v-wechat-title="myTicket.ROUTE_NAME"
    :style="{backgroundImage: 'url(' + bgImg + ')'}"
  >
    <!-- <loading
      :state="loadingState"
      :loadingType="loadingType"
    ></loading> -->
    <div class="scroll_area">
      <!-- 车辆信息 -->
      <div class="ticket_main_info">
        <!-- <div class="flex-h flex-vc flex-hc">
          <h5></h5>
          <i
            class="icon iconfont icon-ditu-01 fontsize48"
            @click="goToMap"
          ></i>
        </div> -->
        <p>{{ticket.START_STATION_NAME}} - {{ticket.END_STATION_NAME}}</p>
      </div>
      <div class="ticket_main_area">
        <!-- 中部图标 -->
        <div class="ticket_icon">
          <i class="iconfont icon-bus fontsize60"></i>
        </div>
        <!-- 车票类型 -->
        <div class="flex-h flex-hsb">
          <div class="ticket_type">{{myTicket.TICKET_DATE_TYPE | ticketTypeFormate}}</div>
          <i
            class="icon iconfont icon-ditu-01 fontsize48"
            @click="goToMap"
          ></i>
        </div>
        <!-- 车票信息 -->
        <div class="ticket_car">
          <div class="car_title flex-h flex-hsb">
            <p>发车时间</p>
            <p>座位</p>
          </div>
          <div class="car_info flex-h flex-hsb fontsize30">
            <p
              v-if="ticket.BETWEEN_DAYS_LONG && ticket.BETWEEN_DAYS_LONG.length > 1"
              class="allow_choose_time"
              @click="openScreen(0)"
            >{{ticket.DEPART_TIME | timeFormate('day')}}
              <i class="iconfont icon-downangel"></i>
            </p>
            <p v-else>{{ticket.DEPART_TIME | timeFormate('day')}}</p>
            <p>{{ticket.SEAT_NO || '无'}}</p>
          </div>
        </div>
        <!-- 二维码 -->
        <div
          v-show="!isShowQRcode"
          class="qrcode"
        >
          <div
            class="qrcode_main"
            id="qrcode"
          >
          </div>
          <div class="qrcode_code">{{ticket.TICKET_NO}}</div>
          <div class="qrcode_msg fontsize28">请将二维码对准检票POS机</div>
        </div>
        <!-- 票为非正常状态时显示的相应的图标 -->
        <div
          v-show="isShowQRcode"
          class="ticket_state"
        >
          <div class="state_icon">
            <img :src="ticket.TICKET_FORWARD_STATE | getICON">
          </div>
          <div class="state_msg fontsize38">{{ticket.TICKET_FORWARD_STATE | getState}}<i
              @click="openScreen(1)"
              class="iconfont icon-info fontsize40"
              v-if="ticket.TICKET_FORWARD_STATE === 6"
            ></i></div>
          <div
            class="state_info"
            v-if="ticket.TICKET_FORWARD_STATE < 4"
          >{{ticket.VERIFY_TIME | timeFormate('day')}}</div>
        </div>
        <!-- 操作按钮 -->
        <div class="ctrl_btn">
          <button
            v-show="ticket.QR_CODE&&ticket.IS_REFUND===1"
            @click="Dishonour()"
            :class="ticket.QR_CODE && ticket.QR_CODE.length > 0 ? '' : 'score'"
            class="fontsize32"
          >退票</button>
          <button
            v-show="ticket.TICKET_FORWARD_STATE === 1"
            class="fontsize32 score"
            :class="ticket.QR_CODE&&ticket.IS_REFUND===1 ? 'check' : ''"
            @click="openScreen(3)"
          >手动验票</button>
          <button
            v-show="(ticket.TICKET_FORWARD_STATE===2||ticket.TICKET_FORWARD_STATE===3||ticket.TICKET_FORWARD_STATE===-99)&&ticket.IS_EVALUATE===0"
            class="fontsize32 score"
            @click="openScreen(2)"
          >评价</button>
        </div>
      </div>
      <div class="remark fontsize28">
        <p><span @click="goToRemark">使用说明</span> | 有效期至：{{ticket.EXPIRE_TIME | timeFormate('day')}}</p>
      </div>
    </div>
    <div
      v-show="screenState"
      class="screen_area"
    >
      <div class="choose_area main_area">
        <div
          v-if="screenIndex === 0"
          class="choose_time"
        >
          <h3>选择日期</h3>
          <div class="time_area flex-h flex-hsb flex-hw">
            <p
              v-for="(time, index) in ticket.BETWEEN_DAYS_LONG"
              :key="index"
              class="fontsize28"
              :class="timeSelected === index? 'selected_time' : ''"
              @click="chooseThisTime(time, index)"
            >{{time | timeFormate('week')}}</p>
          </div>
        </div>
        <!-- 发车计划取消 -->
        <div
          v-else-if="screenIndex === 1"
          class="cancel_reason"
        >
          <h3>发车计划已取消</h3>
          <p>{{ticket.CANCEL_REASON}}</p>
          <div class="ctrl_btn">
            <button @click="screenState = false">我知道了</button>
          </div>
        </div>
        <!-- 评价 -->
        <div
          v-else-if="screenIndex === 2"
          class="rate_area"
        >
          <span class="fontsize36 title_Evaluation">请对我们的服务做出评价</span>
          <div class="star_area flex-h flex-hsb">
            <div
              class="star"
              v-for="(star, index) in [0, 1, 2, 3, 4]"
              :key="index"
              @click="starIndex = index"
            >
              <i
                class="iconfont icon-shoucang1 fontsize60"
                :class="starIndex >= index ? 'select_star' : ''"
              ></i>
            </div>
          </div>
          <p class="fontsize28 star_text">{{starText[starIndex]}}</p>
          <div class="fontsize36 ctrl_btn flex-h">
            <div
              class="hidePop-ups"
              @click="hidePopups()"
            >以后再说</div>
            <div
              @click="rateStar()"
              class="baseColorNoAcitve"
            >立即评价</div>
          </div>
        </div>
        <!-- 手动验票 -->
        <div
          v-else
          class="rate_area"
        >
          <span class="fontsize36 title_check">{{isCheckTicketResult?'提示':'是否验票'}}</span>
          <p class="fontsize28 check_text">{{resultText}}</p>
          <div
            v-if="!isCheckTicketResult"
            class="ctrl_btn flex-h"
          >
            <div
              class="fontsize32 hidePop-ups "
              @click="hidePopups()"
            >稍等一会</div>
            <div
              @click="destoryTicket()"
              class="fontsize32 baseColorNoAcitve"
            >立即验票</div>
          </div>
          <div
            v-else
            class="fontsize32 finish_btn flex-h flex-hc flex-vc"
            @click="hidePopups(true)"
          >
            <div class="baseColorNoAcitve">完成</div>
            <span class="count_down_second">（{{countDownSecond}}秒）</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <Dishonour
      ref="dishonour"
      :ticketDetail='ticketDetail'
    ></Dishonour>
  </div>
</template>

<script>
import Dishonour from '../../components/record/Dishonour'
import QRCode from 'qrcodejs2'
import { getTicketDetail, getTicketRefund, setEvaluate } from './../../interface/getInterface'
import { timeFormate, ticketTypeFormate } from './../../filters/filters'
import { getTicketSuccess, userDestoryTicket } from '../../api/api'
import { setTimeout, clearTimeout } from 'timers'
import { verifyUserSession } from '../../utils/wxLogin.js'
export default {
  components: {
    Dishonour
  },
  data() {
    return {
      screenState: false, // 是否打开弹窗遮罩层
      // timeList: ['2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一', '2019年7月29日 周一'], // 可选日期
      timeSelected: 0, // 选中的时间下标
      bgImg: require('@wechat/img/ticket-bg.png'), // 背景图片
      ticket: { // 当前车票数据，以下为初始化数据
        // 'CANCEL_REASON': '',
        // 'DEPART_TIME': 0,
        // 'END_STATION_NAME': '',
        // 'END_TIME': 0,
        // 'FACE_BUS_STATE': 0,
        // 'INSTRUCTION_URL': '',
        // 'QR_CODE': '',
        // 'ROUTE_NAME': '',
        // 'SEAT_NO': '',
        // 'START_STATION_NAME': '',
        // 'START_TIME': 0,
        // 'TICKET_DATE_TYPE': 0,
        // 'TICKET_FORWARD_STATE': 0,
        // 'TICKET_NO': '',
        // 'TICKET_TYPE_ID': 0
      },
      myTicket: {}, // 从存储在缓存中的my_ticket获取到的数据
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      screenIndex: 2, // 弹窗下标，用于选择弹窗内容
      starIndex: -1, // 评价星级下标，为-1表示未选择
      starText: [ // 星级评价文本，这是我自己写的
        '很差',
        '不好',
        '一般',
        '满意',
        '非常满意'
      ],
      isCheckTicketResult: false, // 是否返回验票结果
      resultText: '验票成功后，请向司机展示验票结果。', // 验票见过文案
      countDownSecond: 5, // 验票倒计时秒数
      checkResultTimer: '', // 验票完成计时器
      ajaxTimer: '',
      intervalTimer: '', // 实时请求票状态计时器，5秒
      ticketDetail: {
        ticketTypeID: [],
        ticketType: 1 // 1为二维码页面退票
      },
      isShowQRcode: false,
      showRefund: 0,
      ticketTypeState: 0, // 票详情状态
      isRefreshTicketState: true// 是否刷新票状态
    }
  },
  filters: {
    ticketTypeFormate,
    timeFormate,
    getState: stateIndex => { // 获取不同状态对应文本
      if (stateIndex === -99) { // 增加临时状态-99：验票通过
        return '验票通过'
      } else if (stateIndex === -21) { // 退款受理中
        return '退款受理中'
      } else {
        let stateText = ['扫码成功', '正常', '已扫码乘车', '已刷脸乘车', '已过期', '已退款', '今日已取消发车', '今日不发车']
        return stateText[stateIndex]
      }
    },
    getICON(val) { // 根据票状态获取相应的icon
      switch (val) {
        case -99://  手动验票通过
        case 0://  扫码成功
          return require('@wechat/img/ticketStatus/QR-codeSuccess.png')
        case 2://  已使用
          return require('@wechat/img/ticketStatus/QR-codeUsed.png')
        case 3://  已使用-刷脸
          return require('@wechat/img/ticketStatus/brush-face.png')
        case -21://  退款受理中
        case 4://  已过期
          return require('@wechat/img/ticketStatus/QR-dishonour&overdue.png')
        case 5:// 已退款
          return require('@wechat/img/ticketStatus/QR-refunded.png')
        case 6:
        case 7:// 今日取消发车或不发车
          return require('@wechat/img/ticketStatus/QR-cancelGrid.png')
      }
    }
  },
  beforeRouteLeave(to, from, next) { // 监听页面离开，当指向上一页时弹出确认框执行对应操作
    if (this.ajaxTimer) { // 路由指向上一页
      clearTimeout(this.ajaxTimer)
    }
    if (this.intervalTimer) { // 路由指向上一页
      clearInterval(this.intervalTimer)
    }
    next()
  },
  mounted() {
    verifyUserSession(this) // 校验用户授权信息是否有效
    this.myTicket = JSON.parse(window.localStorage.getItem('my_ticket')) // 获取缓存中存储的车票数据
    // this.createQRCode()
    this.getTicketDetailData() // 请求接口获取车票详情数据
  },

  methods: {
    createQRCode() { //  生成二维码的方法
      let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize) // 获取当前根字体大小
      let qrSize = 5.333333 * size
      document.getElementById('qrcode').innerHTML = '' // 因为会频繁刷新二维码，所以在此处清空二维码生成区域避免重复生成
      console.log(this.ticket.QR_CODE)
      let qrcode = new QRCode('qrcode', {
        width: qrSize,
        height: qrSize,
        text: this.ticket.QR_CODE, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      console.log(qrcode) // 此处console在于使用qrcode参数，避免报错
    },
    getTicketDetailData(departTime) { // 请求接口获取车票详情数据
      let params = { // 请求参数
        // TICKET_DATE_TYPE: this.myTicket.TICKET_DATE_TYPE,
        TICKET_TYPE_ID: this.myTicket.TICKET_TYPE_ID,
        DEPART_TIME: departTime || this.myTicket.DEPART_TIME,
        TICKET_STATE: this.myTicket.TICKET_STATE
      }
      // 获取票ID
      // this.ticketDetail.ticketTypeID = this.TICKET_TYPE_ID.toString().split().map(_ => +_)
      this.ticketDetail.ticketTypeID = [this.myTicket.TICKET_TYPE_ID]
      console.log('this.ticketDetail.ticketTypeID:' + typeof (this.ticketDetail.ticketTypeID))
      console.warn('************', this.ticketDetail.ticketTypeID)

      getTicketDetail(params).then(data => {
        // 如果票状态为1则显示二维码，否则显示其他状态
        if (data.TICKET_FORWARD_STATE !== 1) {
          this.isShowQRcode = true
        } else {
          this.isShowQRcode = false
        }
        // // 获取票ID
        // this.ticketDetail.ticketTypeID = data.TICKET_TYPE_ID.toString().split().map(_ => +_)
        // console.log('this.ticketDetail.ticketTypeID:' + typeof (this.ticketDetail.ticketTypeID))
        // console.warn('************', this.ticketDetail.ticketTypeID)
        this.ticket = data
        if (this.ticket.QR_CODE) { // 如果需要生成二维码，在此处计算二维码大小并生成二维码
          this.ajaxTimer = setTimeout(() => {
            this.getTicketDetailData(departTime)
          }, 60000)
          this.createQRCode()
        }
        if (this.isRefreshTicketState) {
          this.ticketStateTimer()
          this.isRefreshTicketState = false
        }
        // this.loadingState = false
      }).catch(err => {
        console.log(err)
        // this.loadingType = 'fail'
      })
    },
    ticketStateTimer() { // 查询票状态
      if (this.intervalTimer) {
        clearInterval(this.intervalTimer)
      }
      // 票状态为正常，且票ID存在，则执行5秒一次的请求刷新二维码
      if (this.ticket.TICKET_FORWARD_STATE === 1 && this.ticket.TICKET_ID) {
        this.intervalTimer = setInterval(() => {
          if (this.ticket.TICKET_FORWARD_STATE === 1 && this.ticket.TICKET_ID) {
            getTicketSuccess(this.ticket.TICKET_ID).then(res => {
              if (res === 2) {
                this.isShowQRcode = true
                this.ticket.TICKET_FORWARD_STATE = 2// 票前端状态状态（0.扫码成功 1.正常 2.已扫码乘车 3.已刷脸乘车 4.已过期 5.已退款 6.今日已取消发车 7.不发车）
                this.ticket.IS_REFUND = 0// IS_REFUND：0不可退票，1可退票
                clearInterval(this.intervalTimer)
              }
            })
          }
        }, 5000)
      }
    },
    chooseThisTime(time, index) {
      this.timeSelected = index
      this.screenState = false
      if (this.ajaxTimer) {
        clearTimeout(this.ajaxTimer)
      }
      this.getTicketDetailData(time)
    },
    ticketRefund() { // 退票操作，当前暂无此操作
      let params = {
        OPEN_ID: this.ticket.OPEN_ID
      }
      getTicketRefund(params).then(data => {

      }).catch(err => {
        console.log(err)
      })
    },
    hidePopups(isResetTimer) {
      this.screenState = false
      this.starIndex = -1
      if (isResetTimer) { // 重置验票计时器参数
        this.screenState = false
        this.countDownSecond = 5
        this.isCheckTicketResult = false
        this.resultText = '验票成功后，请向司机展示验票结果。'
        clearInterval(this.checkResultTimer)
      }
    },
    rateStar() { // 对当次服务评分
      console.warn(this.ticket.TICKET_NO)
      if (this.starIndex === -1) { // 星级1-5星对应下标starIndex：0-4
        this.showToast('您还没有对我们的服务打分')
      } else {
        let params = { // 请求参数
          TICKET_NO: this.ticket.TICKET_NO,
          STAR_RATING: this.starIndex + 1
        }
        setEvaluate(params).then(data => { // 评价成功操作
          this.showToast('感谢您对我们的支持')
          this.getTicketDetailData()
          this.screenState = false
          this.starIndex = -1
          this.$router.go(0)
        }).catch(err => { // 评价失败操作
          console.log(err)
          this.screenState = false
          this.showToast('评价失败，请稍后重试')
        })
      }
    },
    goToRemark() { // 跳转至使用说明
      this.$router.push({ name: 'myRemark' })
    },
    openScreen(num) { // 打开弹窗选择弹窗内容
      this.screenState = true
      this.screenIndex = num
    },
    // 用户手动验票
    destoryTicket() {
      userDestoryTicket(this.ticket.TICKET_ID).then(res => {
        this.isCheckTicketResult = true
        if (res === 2) {
          this.isShowQRcode = true
          // 临时状态TICKET_FORWARD_STATE->-99：验票通过
          this.ticket.TICKET_FORWARD_STATE = -99// 票前端状态状态（0.扫码成功 1.正常 2.已扫码乘车 3.已刷脸乘车 4.已过期 5.已退款 6.今日已取消发车 7.不发车）
          this.ticket.IS_REFUND = 0// IS_REFUND：0不可退票，1可退票
          if (this.ajaxTimer) {
            clearTimeout(this.ajaxTimer)
          }
          if (this.intervalTimer) {
            clearInterval(this.intervalTimer)
          }
          this.screenState = false
          this.isCheckTicketResult = false
          this.resultText = '验票成功后，请向司机展示验票结果。'
          // this.checkCountDownTimer()
        }
      }).catch((err) => {
        if (err && err.error && err.error.data && err.error.data.RSPMSG) {
          this.isCheckTicketResult = true
          this.resultText = err.error.data.RSPMSG
          this.getTicketDetailData()
          this.checkCountDownTimer()
        }
      })
    },
    // 完成5秒倒计时
    checkCountDownTimer() {
      this.checkResultTimer = setInterval(() => {
        if (this.countDownSecond > 1) {
          this.countDownSecond--
        } else {
          this.screenState = false
          this.countDownSecond = 5
          this.isCheckTicketResult = false
          this.resultText = '验票成功后，请向司机展示验票结果。'
          clearInterval(this.checkResultTimer)
        }
      }, 1000)
    },
    // 退票弹窗展示
    Dishonour() {
      this.$refs.dishonour.mask.show()
    },
    // 前往地图页
    goToMap() {
      this.$router.push({ name: 'map', params: { DIRECTION: this.ticket.DIRECTION, ROUTE_ID: this.ticket.ROUTE_ID } })
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  overflow: hidden;
}
.info_main {
  min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  background-size: 100%;
  background-repeat: no-repeat;
  .scroll_area {
    height: fill-available;
    overflow: auto;
    .ticket_main_info {
      color: #fff;
      text-align: center;
      position: relative;
      padding-bottom: 64px;
      div {
        h5 {
          height: 100px;
          line-height: 100px;
        }
        i {
          color: #027aff;
          position: absolute;
          right: 64px;
          top: 198px;
          z-index: 99;
        }
      }
      p {
        margin: 32px;
      }
    }
    .ticket_main_area {
      width: 686px;
      height: 900px;
      margin: auto;
      background-color: #fff;
      border-radius: 8px; /*no*/
      position: relative;
      padding-top: 50px;
      .ticket_icon {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        border-radius: 50%;
        text-align: center;
        line-height: 140px;
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        background-color: #fff;
        color: #027aff;
      }
      .ticket_type {
        width: 120px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color: #fafafa;
        color: #ccc;
        border: 1px dashed #ccc; /*no*/
        border-top-right-radius: 60px; /*no*/
        border-bottom-right-radius: 60px; /*no*/
      }
      .icon-ditu-01 {
        color: #027aff;
        margin-right: 32px;
      }
      .ticket_car {
        width: 620px;
        margin: 32px auto;
        border-bottom: 1px solid #eee; /*no*/
        .car_title {
          font-weight: 500;
          margin-bottom: 10px;
        }
        .car_info {
          margin-bottom: 12px;
          color: #666;
          .allow_choose_time {
            color: #027aff;
            .icon-downangel {
              width: 32px;
              height: 32px;
              text-align: center;
              line-height: 36px;
              border-radius: 50%;
              background-color: #027aff;
              color: #fff;
              display: inline-block;
              font-size: 12px; /*no*/
              font-weight: bold;
            }
          }
        }
      }
      .face_swiping {
        width: 620px;
        margin: auto;
        img {
          width: 100%;
        }
      }
      .qrcode {
        text-align: center;
        .qrcode_main {
          width: 400px;
          height: 400px;
          margin: auto;
          margin-top: 32px;
          margin-bottom: 16px;
          img {
            width: 100%;
          }
        }
        .qrcode_code {
          margin-bottom: 16px;
        }
        .qrcode_msg {
          color: #999;
        }
      }
      .ticket_state {
        text-align: center;
        margin-top: 120px;
        .state_icon {
          text-align: center;
          img {
            width: 200px;
            height: 200px;
          }
          // i {
          //   width: 200px;
          //   height: 200px;
          //   line-height: 200px;
          //   text-align: center;
          //   background-color: #027aff;
          //   border-radius: 50%;
          //   display: block;
          //   font-size: 80px; /*no*/
          //   color: #fff;
          //   margin: auto;
          //   font-weight: bold;
          // }
          .icon-wallet {
            color: #027aff;
            background-color: #fff;
            border-radius: 0;
          }
        }
        .state_msg {
          color: #333;
          margin-top: 26px;
          margin-bottom: 16px;
          font-weight: 500;
          .icon-info {
            color: #027aff;
            margin-left: 16px;
          }
        }
        .state_info {
          color: #666;
        }
      }
      .ctrl_btn {
        width: 100%;
        position: absolute;
        bottom: 50px;
        text-align: center;
        button {
          width: 240px;
          height: 64px;
          border-radius: 64px;
          color: #0082ff;
          border: 2px solid #0082ff; /*no*/
          background-color: #fff;
        }
        .score {
          background-color: #0082ff;
          border: 1px solid #fff; /*no*/
          color: #fff;
        }
        .check {
          margin-left: 80px;
        }
      }
    }
    .remark {
      text-align: center;
      padding: 32px 0;
      p {
        color: #333;
        span {
          color: #000;
        }
      }
    }
  }
  .screen_area {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    .main_area {
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border-radius: 8px; /*no*/
    }
    .choose_area {
      width: fit-content;
      height: fit-content;
      text-align: center;
      // padding: 0 32px;
      // padding-bottom: 32px;
      box-sizing: border-box;
      h3 {
        height: 76px;
        line-height: 76px;
        border-bottom: 1px solid #eee; /*no*/
      }
      .choose_time {
        max-width: 622px;
        .time_area {
          height: 400px;
          overflow: auto;
          p {
            height: 52px;
            line-height: 52px;
            padding: 0 12px;
            margin-top: 16px;
            background-color: #f0f4fd;
            color: #027aff;
            border-radius: 4px; /*no*/
          }
          .selected_time {
            color: #fff;
            background-color: #027aff;
          }
        }
      }
      .cancel_reason {
        p {
          text-align: left;
          padding: 32px 0;
        }
        .ctrl_btn {
          button {
            width: 200px;
            height: 64px;
            border: 0;
            background-color: #027aff;
            color: #fff;
            border-radius: 25px; /*no*/
          }
        }
      }
      .rate_area {
        width: 540px;
        height: auto;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        padding-top: 16px;
        box-sizing: border-box;
        .title_Evaluation,
        .title_check {
          font-weight: 400;
        }
        .star_area {
          padding: 16px 32px;
          .star {
            text-align: center;
            i {
              color: #ccc;
              transform: all 0.5s;
            }
            .select_star {
              color: #fecd07;
            }
          }
        }
        .star_text {
          height: 38px;
        }
        .check_text {
          margin-top: 20px;
        }
        p {
          color: #333;
        }
        .ctrl_btn {
          // font-size: 36px;
          font-weight: 400;
          margin-top: 32px;
          border-top: 2px solid #cccccc; /*no*/
          div {
            width: 50%;
            height: 86px;
            line-height: 86px;
          }
          .hidePop-ups {
            border-right: 2px solid #cccccc; /*no*/
          }
        }
        .finish_btn {
          width: 100%;
          height: 86px;
          margin-top: 32px;
          border-top: 2px solid #cccccc; /*no*/
        }
        .count_down_second {
          color: #999;
        }
      }
    }
  }
}
</style>
